<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="/js/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/js/jqgrid/css/jquery-ui-1.8.13.custom.css" />
<script type="text/javascript" src="/js/jqgrid/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/js/jqgrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    $(function()  
    {  
        $("#gridTable").jqGrid({  
            url:'/test',  
            datatype: "json",  
            height: 250,  
            colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],  
            colModel:[  
                {name:'id',index:'id', width:60, sorttype:"int"},  
                {name:'userName',index:'userName', width:90},  
                {name:'gender',index:'gender', width:90},  
                {name:'email',index:'email', width:125,sorttype:"string"},  
                {name:'QQ',index:'QQ', width:100},        
                {name:'mobilePhone',index:'mobilePhone', width:120},          
                {name:'birthday',index:'birthday', width:100, sorttype:"date"}  
            ],  
            sortname:'id',  
            sortorder:'asc',  
            viewrecords:true,  
            rowNum:10,  
            rowList:[10,20,30],  
            jsonReader:{  
                repeatitems : false  
            },  
            pager:"#gridPager",  
            caption: "jqGrid与Servlet集成"
        }).navGrid('#gridPager',{edit:false,add:false,del:false});  
    })  
</script>
</head>
<body>  
<table id="gridTable"></table>  
<div id="gridPager"></div>  
</body>
</html>
